# Component: Download Button

Contextual action for file downloads

Action Block

![[Pasted image 20260426082934.png]]

### BEM Anatomy

| Type      | Class Name            | Description                                                                       |
| --------- | --------------------- | --------------------------------------------------------------------------------- |
| ==Block== | `.as-download-button` | The outer wrapper for the download action.                                        |
| Element   | `__button`            | The button or link element. Forces a **pill** border-radius (`50rem` equivalent). |
| Element   | `__label`             | Specific internal label element (inherits from Mashup components).                |
| Element   | `__icon`              | Specific internal icon element (defaults to `fa-download`).                       |

### Logic & Layout

The component determines its visual weight based on the `ShowAsLink` parameter, applying either standard Bootstrap button colors or the link variant.

##### Generated HTML (Primary Mode)

```html
<div class="as-download-button">
    <a href="/files/doc.pdf" 
       class="btn btn-primary as-download-button__button" 
       download="doc.pdf">
        <i class="as-mashup-download__icon fa-solid fa-download"></i>
    </a>
</div>
```

##### SCSS

```scss
.as-download-button {
  &__button {
    // Ensures a soft-curved interactive area
    border-radius: var(--bs-border-radius-pill);
  }
}
```
